<template>
  <div>
    <el-dialog :title='title' :visible.sync="dialogFormVisible" @closed="$emit('update:activated', false)"
               width="750px">
      <el-card>
        <div class="dialogStyle" style="display: flex;flex-direction: column">
          <el-form  class="search-form search-form-normal" label-width="110px" ref="form"
                    style="flex: 5" :model="form" size="mini" :rules="rules">
            <el-form-item :label="$t('pageTable.departureDate')" prop="departureDate">
              <el-date-picker
                v-model="form.departureDate"
                type="date"
                style="width:160px"

                value-format="yyyyMMdd">
              </el-date-picker>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
            <el-form-item :label="$t('pageTable.packingDate')" prop="packingDate">
              <el-date-picker
                v-model="form.packingDate"
                type="date"
                style="width:160px"
                value-format="yyyyMMdd">
              </el-date-picker>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
            <el-form-item :label="$t('pageTable.contractNo')" prop="contractNo">
              <el-input v-model="form.contractNo" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
              <!--<div style="float: right;margin-right: 40px;"><el-button :disabled="form.contractNo==''" @click="initInfoByContractNo(form.contractNo)">{{$t('searchFrom.checkAndGet')}}</el-button></div>-->
            </el-form-item>
            <el-form-item :label="$t('pageTable.MatterSupplierName')" prop="supplierName">
              <el-input v-model="form.supplierName" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
            <el-form-item :label="$t('pageTable.MatterMaterialSpecificNumber')" prop="materialCode">
              <el-input v-model="form.materialCode" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
              <div style="float: right;margin-right: 40px;"><el-button :disabled="form.materialCode==''" @click="selectMaterialInfo(form.materialCode)">{{$t('searchFrom.checkAndGet')}}</el-button></div>
            </el-form-item>
            <el-form-item :label="$t('pageTable.materialName')" prop="materialNameCn">
              <el-input v-model="form.materialNameCn" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
            <el-form-item label="英文品名" prop="materialNameEn">
              <el-input v-model="form.materialNameEn" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
            <el-form-item label="俄文品名" prop="materialNameRu">
              <el-input v-model="form.materialNameRu" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
            <el-form-item :label="$t('pageTable.MatterHSCustomsNumber')" prop="hsNo">
              <el-input v-model="form.hsNo" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
            <el-form-item label="数量" prop="num">
              <el-input v-model="form.num" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
            <el-form-item :label="$t('pageTable.MatterCompany')" prop="unit">
              <el-select  v-model="form.unit" style="width: 160px" size="mini" clearable>
                <el-option value=""></el-option>
                <el-option
                  size="mini"
                  v-for="item in unit"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
            <el-form-item label="外包装件数" prop="numberOfPackages">
              <el-input v-model="form.numberOfPackages" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>

            <el-form-item label="净重" prop="netWeight">
              <el-input v-model="form.netWeight" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>

            <el-form-item label="毛重" prop="grossWeight">
              <el-input v-model="form.grossWeight" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>

            <el-form-item label="尺寸" prop="size">
              <el-input v-model="form.size" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>

            <el-form-item :label="$t('pageTable.containerSize')" prop="containerSize">
              <el-radio-group v-model="form.containerSize" class="" style="width:250px" size="mini">
                <el-radio label="20GP">20GP</el-radio>
                <el-radio label="40GP">40GP</el-radio>
                <el-radio label="40HC">40HC</el-radio>
              </el-radio-group>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
            <el-form-item label="箱号" prop="caseNumber">
              <el-input v-model="form.caseNumber" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>

            <el-form-item label="铅封号" prop="leadMark">
              <el-input v-model="form.leadMark" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>

            <el-form-item label="海运费" prop="oceanFreight">
              <el-input v-model="form.oceanFreight" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>

            <el-form-item label="单价" prop="materialPrice">
              <el-input v-model="form.materialPrice" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>

            <el-form-item label="总货值" prop="totalValue">
              <el-input v-model="form.totalValue" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>

            <el-form-item label="代理费" prop="agencyFee">
              <el-input v-model="form.agencyFee" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>

            <el-form-item label="集装箱重量" prop="containerWeight">
              <el-input v-model="form.containerWeight" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>

            <el-form-item label="主提单号" prop="billNo">
              <el-input v-model="form.billNo" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>

            <el-form-item label="分提单号" prop="secondaryBillNo">
              <el-input v-model="form.secondaryBillNo" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>

            <el-form-item label="船名航次" prop="vesselNameVoyage">
              <el-input v-model="form.vesselNameVoyage" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>

            <el-form-item label="港口" prop="port">
              <el-input v-model="form.port" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>

            <el-form-item label="目的港" prop="destinationPort">
              <el-input v-model="form.destinationPort" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>

            <el-form-item :label="$t('pageTable.TypeOfShipping')" prop="shippingMethods">
              <el-select  v-model="form.shippingMethods" style="width: 160px" size="mini" clearable>
                <el-option value=""></el-option>
                <el-option
                  size="mini"
                  v-for="item in transportation"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>

            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="form.remark" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="200" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <div class="dialogButton">
        <el-button type="primary" size="mini" @click="submit('form')"><i
          class="fa fa-check"></i>  {{$t('searchFrom.confirm')}}
        </el-button>
        <el-button size="mini" @click=" cancel">{{$t('searchFrom.cancel')}}</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
  import activityService from '@/api/warehouse/packingDetailsList'

  export default {
    name: "EditOrderPlan",
    props: {
      id: {},
      mode: "",
    },
    computed: {
      title: function () {
        let entityName = this.$t('route.warehousePackingDetailsList')
        if(this.mode === 'ADD'){return this.$t('searchFrom.add')+entityName}
        else if(this.mode === 'EDIT'){return this.$t('searchFrom.edit')+entityName}
      }
    },
    data() {
      return {
        dialogFormVisible: true,
        unit:[],
        transportation:[],
        form: {
          contractNo:"",
          packingDate:"",
          departureDate:"",
          supplierName:"",
          materialCode:"",
          materialNameCn:"",
          materialNameEn:"",
          materialNameRu:"",
          hsNo:"",
          num:"",
          unit:"",
          numberOfPackages:"",
          netWeight:"",
          grossWeight:"",
          size:"",
          containerSize:"",
          caseNumber:"",
          leadMark:"",
          oceanFreight:"",
          materialPrice:"",
          totalValue:"",
          agencyFee:"",
          containerWeight:"",
          billNo:"",
          secondaryBillNo:"",
          vesselNameVoyage:"",
          port:"",
          destinationPort:"",
          shippingMethods:"",
          remark:"",
          version:"",
        },
        /**表单的验证*/
        rules: {
          contractNo: [
            {required: false, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          packingDate: [
            {required: false, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            // {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          departureDate: [
            {required: false, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            // {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          supplierName: [
            {required: false, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          materialCode: [
            {required: true, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          materialNameCn:[
            {required: false, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          materialNameEn:[
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          materialNameRu:[
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          hsNo:[
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          num:[
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          unit:[
            {required: false, message: this.$t('Tips.checkMaterialUnit'), trigger: 'change'}
          ],
          numberOfPackages:[
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          netWeight:[
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          grossWeight:[
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          size:[
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          containerSize: [
            {required: false, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          caseNumber:[
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          leadMark:[
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          oceanFreight:[
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          materialPrice:[
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          totalValue:[
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          agencyFee:[
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          containerWeight:[
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          billNo: [
            {required: false, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          secondaryBillNo:[
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          vesselNameVoyage:[
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          port:[
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          destinationPort:[
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          shippingMethods:[
            {required: false, message: "请选择运输方式", trigger: 'change'}
          ],
          remark:[
            {required: false, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
        },
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      initInfoByContractNo(contractNo){
        activityService.initInfoByContractNo({contractNo}).then(resp=>{
          if (resp.data.code == 200){
            this.form.billNo =resp.data.result.billNo;
            this.form.packingDate=resp.data.result.packingDate;
            this.form.departureDate=resp.data.result.departureDate;
            this.form.paymentDay=resp.data.result.paymentDay;
            this.form.paymentDate=resp.data.result.paymentDate;
          } else {
            this.$notify({message: resp.data.message, type: "error"});
          }
        },error => {

        })
      },


      async init() {
        await  activityService.initView().then(resp=>{
          this.transportation=resp.data.result.shippingMethods;
          this.unit=resp.data.result.unit;
        },error => {

        })
        if (this.mode == "EDIT") {
          await activityService.getPackingDetailsInfo({id: this.id}).then(resp => {
            this.form = resp.data.result;
          }, err => {
            console.error(err);
          });
        }

      },
      async selectMaterialInfo(materialCode){
        await activityService.getPackingDetailsInfoBymaterialCode({materialCode:materialCode}).then(resp=>{
          if (resp.data.code == "200") {
            this.form.supplierName    = resp.data.result.supplierName;
            this.form.materialNameCn  = resp.data.result.materialNameCn;
            this.form.materialNameEn  = resp.data.result.materialNameEn;
            this.form.materialNameRu  = resp.data.result.materialNameRu;
            this.form.hsNo            = resp.data.result.hsNo;
            this.form.unit            = resp.data.result.unit;
            this.form.materialPrice   = resp.data.result.materialPrice;
          } else {
            this.form.supplierName    = "";
            this.form.materialNameCn  = "";
            this.form.materialNameEn  = "";
            this.form.materialNameRu  = "";
            this.form.hsNo            = "";
            this.form.unit            = "";
            this.form.materialPrice   = "";
            this.$notify({message: resp.data.message, type: "error"});
          }
        })
      },
      /*确定*/
      submit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let data = {
              id                        :this.id                              || undefined,
              contractNo                :this.form.contractNo                 || undefined,
              packingDate               :this.form.packingDate                || undefined,
              departureDate             :this.form.departureDate              || undefined,
              supplierName              :this.form.supplierName               || undefined,
              materialCode              :this.form.materialCode               || undefined,
              materialNameCn            :this.form.materialNameCn             || undefined,
              materialNameEn            :this.form.materialNameEn             || undefined,
              materialNameRu            :this.form.materialNameRu             || undefined,
              hsNo                      :this.form.hsNo                       || undefined,
              num                       :this.form.num                        || undefined,
              unit                      :this.form.unit                       || undefined,
              numberOfPackages          :this.form.numberOfPackages           || undefined,
              netWeight                 :this.form.netWeight                  || undefined,
              grossWeight               :this.form.grossWeight                || undefined,
              size                      :this.form.size                       || undefined,
              containerSize             :this.form.containerSize              || undefined,
              caseNumber                :this.form.caseNumber                 || undefined,
              leadMark                  :this.form.leadMark                   || undefined,
              oceanFreight              :this.form.oceanFreight               || undefined,
              materialPrice             :this.form.materialPrice              || undefined,
              totalValue                :this.form.totalValue                 || undefined,
              agencyFee                 :this.form.agencyFee                  || undefined,
              containerWeight           :this.form.containerWeight            || undefined,
              billNo                    :this.form.billNo                     || undefined,
              secondaryBillNo           :this.form.secondaryBillNo            || undefined,
              vesselNameVoyage          :this.form.vesselNameVoyage           || undefined,
              port                      :this.form.port                       || undefined,
              destinationPort           :this.form.destinationPort            || undefined,
              shippingMethods           :this.form.shippingMethods            || undefined,
              remark                    :this.form.remark                     || undefined,
              version                   :this.form.version                    || undefined,
            };
            if (this.mode == 'EDIT') {  //编辑
              activityService.updatePackingDetailsInfo({...data}).then(resp => {
                if (resp.data.code == "201") {
                  this.$notify({message: resp.data.message, type: "success"});
                  this.$emit("success");
                  this.dialogFormVisible = false
                } else {
                  this.$notify({message: resp.data.message, type: "error"});
                }
              })
            } else {
              activityService.addPackingDetailsInfo({...data}).then(resp => {  //添加
                if (resp.data.code == "201") {
                  this.$notify({message: resp.data.message, type: "success"});
                  this.$emit("success");
                  this.dialogFormVisible = false
                } else {
                  this.$notify({message: resp.data.message, type: "error"});
                }
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      cancel() {
        this.dialogFormVisible = false
      },
    }
  }
</script>

<style scoped>

</style>